<template>
    <div class="todo" v-if="!hide">
        <div class="title"><h2>To Do</h2> <h4 @click="hide =!hide">Done</h4></div>
        <input type="text" v-model="inputValue"  @keyup.enter="addItem"><span @click="addItem"></span>
        <ul >
            <li class="istodo" v-for="(item, index) in items" :key="index" @click= "Done(index)" >{{ item }}</li>
            <li v-if="items.length === 0">暂无代办</li>
            <p v-if="items.length>0">代办:{{ items.length }}条 <button @click="addAll">全部完成</button></p>
        </ul>
    </div>
    <div class="done" v-if="hide">
    <div class="title"><h2>Done</h2> <h4 @click="hide =!hide">To Do</h4></div>
    <p v-if="dones.length === 0">暂无已办</p>
    <p v-if="dones.length > 0">代办:{{ items.length }}条,已办:{{ dones.length }}条</p>
    <ul>
      <li class="donetodo" v-for="(item, index) in dones" :key="index" @click= "removeItem(index)" >{{ item }}</li>
      <p v-if="dones.length > 0"><button @click="removeAll">清空已办</button></p>
    </ul>
</div>
</template>
<script setup>
    import { ref } from 'vue'
    const inputValue = ref("")
    const items = ref([])
    const dones = ref([])
    const hide = ref(false)
    
    const addItem = () => {
        if (inputValue.value.trim()) {
            items.value.push(inputValue.value)
            inputValue.value = ""            
        }
    }
    
    const Done = (index) => {
        dones.value.push(items.value[index])
        items.value.splice(index, 1)
    }
   const removeItem = (index) => {
        dones.value.splice(index, 1)
    }
    const addAll = () => {
        dones.value.push(...items.value)
        items.value = []
    }
  const removeAll = () => {
        dones.value = []
    }
</script>

<style scoped>

</style>